<template>
  <view class="author">
		<cu-custom bgColor="" :isBack="true">
		  <block slot="backText">返回</block>
		  <block slot="content">关于作者</block>
		</cu-custom>
		<canvas canvasId="bubble" class="like-fx" :style="{width:width+'px',height:height+'px'}"></canvas>
    <like-fx class="vue-ref" data-ref="likeFx" :height="height" :width="width"></like-fx>
    <view class="imagesize">
			<image class="in-image" src="../../static/images/headerbg.png"></image>
			<view class="content">
				<image class="person" src="../../static/images/person.jpg"></image>
				<view class="name">郭俊权</view>
				<view class="job">Nedo软件工程师</view>
				<view class="desc">没有对象？来，new一个</view>
				<view class="desc">不一样的烟火，瞅自己都上火.</view>
				<view class="desc">点进来的，都是各个方面的大佬~ </view>
				<view class="contact">
					<image @tap="wx_click" data-index="0" src="../../static/images/weixin.png"></image>
					<image @tap="wx_click" data-index="1" src="../../static/images/QQ.png"></image>
				</view>
			</view>
		</view>
	
    <button openType="contact">
        <image class="share-img png round shadow-lg bg-white" mode="aspectFit" src="https://6365-ceart-bh8ws-1300171498.tcb.qcloud.la/static/biubiubiu.gif"></image>
    </button>
  </view>
</template>

<script>
  import util from '../../utils/time.js';
  import likeFx from '../../components/likeFx';
  export default {
	components: { 'like-fx':likeFx },
	data() {
		return {
			animation_timer: null,
			width: 375,
			height: 1920,
				erweima: [ "https://ae01.alicdn.com/kf/H32644916c1b14d878d226b27a7f1e1253.jpg", "https://ae01.alicdn.com/kf/Hc1ecbeac3fed4e79bbbf07c26ec87691O.jpg" ]
		}
	},
	created: function() {

	},
	mounted: async function() {
		this.startLikeAnimation();
	},
  methods: {
		async startLikeAnimation(){
			let that = this;
			that.animation_timer = setInterval(function() {
				that.$refs.likeFx.likeClick();
			}, 300);
		},
		wx_click: function(e) {
			let index = e.target.dataset.index;
			uni.previewImage({
				current: this.erweima[index],
				urls: this.erweima
			});
		}
	},
	onShareAppMessage: function() {
		return {
			title: "快来和我们玩转软件开发吧～",
			path: "/pages/author/author"
		};
	},
  }
</script>

<style>
.author {
		margin: 0;
		width: 100%;
		height: 100vh;
		padding-top: 20%;
		color: #fff;
		background: linear-gradient(-120deg,#f15bb5,#9a5ce5,#01beff,#00f5d4);
		background-size: 500% 500%;
		animation: gradientBG 15s ease infinite;
		position: relative;
}

@-webkit-keyframes gradientBG {
		0% {
				background-position: 0 50%;
		}

		50% {
				background-position: 100% 50%;
		}

		100% {
				background-position: 0 50%;
		}
}

@keyframes gradientBG {
		0% {
				background-position: 0 50%;
		}

		50% {
				background-position: 100% 50%;
		}

		100% {
				background-position: 0 50%;
		}
}

.imagesize>image {
    width: 100%;
    height: 100%;
}

.imagesize .content {
    position: absolute;
    top: 20%;
    left: 8%;
    width: 84%;
    height: 70%;
    border-radius: 30rpx;
    background: rgba(0,0,0,0.6);
}

.content .person {
    display: block;
    margin: 50rpx auto 45rpx;
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
}

.content .name {
    text-align: center;
    font-size: 45rpx;
    color: #eeebec;
}

.content .job {
    margin: 40rpx 0;
    text-align: center;
    font-size: 26rpx;
    color: #e9e3e5;
}

.content .desc {
    text-align: center;
    font-size: 32rpx;
    color: #fcfcfd;
}

.content .contact {
    margin-top: 45rpx;
    text-align: center;
}

.content .contact>image {
    margin: 0 20rpx;
    width: 85rpx;
    height: 85rpx;
    border-radius: 50%;
}

.share-img {
    position: fixed;
    padding: 10rpx;
    width: 100rpx;
    height: 100rpx;
    bottom: 200rpx;
    right: 20rpx;
    z-index: 1024;
    opacity: .8;
    box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0,0,0,.3);
    border: none;
}


.like-fx {
    position: fixed;
    right: 0;
    z-index: 1024;
    pointer-events: none;
}
</style>